<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
      v-model="form" ref="crud" @search-change="searchChange" @search-reset="searchReset"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>

<script>
import { getAlarmList } from "./api/alarm";
import { mapGetters } from "vuex";

export default {
  data () {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      option: {
        menu: false,
        menuType: 'button',
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        index: true,
        indexLabel: '序号',
        editBtn: false,
        addBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: false,
        column: [
          {
            label: "关键词",
            prop: "keyword",
            search: true,
            hide: true,
            placeholder: "用户和手机号搜索",
          },
          {
            label: "报警位置",
            prop: "address",
          },
          {
            label: "用户名称",
            prop: "nickname",
          },
          {
            label: "用户手机号",
            prop: "phone",
          },
          {
            label: "紧急联系人",
            prop: "contact",
          },
          {
            label: "紧急联系人电话",
            prop: "emergency_phone",
          },
          {
            label: "日期",
            prop: "created_at",
          },

        ],
      },
      data: []
    };
  },

  computed: {
    ...mapGetters(["permission"]),
    permissionList () {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
      };
    }
  },

  mounted () {
    this.onLoad(this.page);
  },

  methods: {
    searchReset () {
      this.query = {};
      this.onLoad(this.page);
    },

    searchChange (params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    currentChange (page_cursor) {
      this.page.currentPage = page_cursor;
    },

    sizeChange (page_size) {
      this.page.pageSize = page_size;
    },

    refreshChange () {
      this.onLoad(this.page, this.query);
    },

    onLoad (page, params = {}) {
      this.loading = true;
      let param = {
        ...params,
        page: page.currentPage,
        size: page.pageSize
      }
      // 实际API调用
      getAlarmList(param).then((res) => {
        const resData = res.data.pagination;
        this.page.total = resData.total;
        this.data = resData.list;
        console.log(this.data, '5555');
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  .el-table__header-wrapper {
    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 500;
    }
  }
}
</style>